<template>
  <div class="contanter">
    <span>
      <h2 style="display: inline-block">车位管理</h2>
      <span> 用于管理小区里每一个停车位的基本信息 </span>
    </span>
    <!-- 搜索区域-->
    <el-card class="box-card">
      <el-row :gutter="15">
        <el-form
          ref="formData"
          :model="formData"
          size="medium"
          label-position="top"
        >
          <el-row type="flex" justify="space-around" align="bottom">
            <el-col :span="15">
              <el-row type="flex" justify="space-around" align="bottom">
                <el-col :offset="2" :span="7">
                  <el-form-item label="小区名称">
                    <el-select
                      v-model="formData.community_code"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.code"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="7" :offset="2">
                  <el-form-item label="车位名称">
                    <el-input
                      v-model="formData.name"
                      size="small"
                      placeholder="请输入"
                      clearable
                      :style="{ width: '100%' }"
                    />
                  </el-form-item>
                </el-col>

                <el-col :offset="2" :span="7">
                  <el-form-item label="创建时间">
                    <el-date-picker
                      v-model="createTime"
                      size="small"
                      type="daterange"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      :style="{ width: '100%' }"
                      start-placeholder="请选择"
                      end-placeholder="请选择"
                      range-separator="-"
                      :timestamp="true"
                      clearable
                      @change="selectTime"
                    />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4" :offset="5">
              <el-form-item size="large">
                <el-button size="small" @click="resetting()">重置</el-button>
                <el-button
                  type="primary"
                  size="small"
                  @click="searchSubmit"
                >查询</el-button>
              </el-form-item>
            </el-col>
          </el-row></el-form>
      </el-row>
    </el-card>
    <!-- 表格区域 -->
    <el-card class="box-card two">
      <!--  -->
      <span style="float: right">
        <el-button
          style="margin-right: 20px"
          type="primary"
          @click="addCom"
        >新增车位</el-button>
        <!-- 刷新 -->
        <el-tooltip content="刷新" placement="top">
          <el-link
            :underline="false"
            style="font-size: 25px"
            icon="el-icon-refresh-right"
            @click="refresh()"
          /></el-tooltip>
      </span>
      <!-- <i style="font-size: 20px" class="el-icon-refresh-right"></i> -->
      <!-- 表格区域 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="community.name" label="小区名称" />
        <el-table-column prop="name" label="车位名称" />
        <el-table-column prop="code" label="车位编码" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="create_time" label="创建时间">
          <template
            v-slot="{ row }"
          >{{ row.create_time | formatDate }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="180">
          <template v-slot="{ row }">
            <el-button type="text" @click="edit(row.id)">编辑</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- 分页 -->
      <el-row type="flex" justify="end" style="margin-top: 20px">
        <span
          class="demonstration"
        >1-{{ tableData.length }}总共{{ count }}条</span>

        <el-pagination
          :current-page="table.current"
          :page-size="table.pageSize"
          layout="prev, pager, next"
          :total="count"
          @current-change="changeCurrent"
        />
      </el-row>
    </el-card>
    抽屉

    <el-drawer
      ref="drawer"
      size="50%"
      title="新增车位信息"
      :before-close="handleClose"
      :visible.sync="dialog"
      direction="rtl"
      custom-class="demo-drawer"
    >
      <!-- 表单 -->
      <el-form
        :model="formInline"
        class="demo-form-inline"
        style="padding: 20px"
      >
        <el-row>
          <el-col :span="10">
            <el-form-item label="所属小区">
              <br>
              <el-select
                v-model="addData.community_code"
                placeholder="请选择"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in addOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <div class="grid-content bg-purple" /></el-col>
          <el-col :span="10" :offset="2">
            <el-form-item label="车位名称">
              <el-input v-model="addData.name" placeholder="审批人" />
            </el-form-item>
            <div class="grid-content bg-purple-light" /></el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="备注">
              <el-input v-model="addData.remark" type="textarea" />
            </el-form-item>
            <div class="grid-content bg-purple" /></el-col>
        </el-row>
      </el-form>
      <!-- 表单 -->
      <div class="demo-drawer__content">
        <div class="demo-drawer__footer" style="float: right">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="onSubmit()">{{
            loading ? "提交中 ..." : "确 定"
          }}</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { getCommunityListApi } from '@/api/community'
import {
  getParkingListApi,
  SearchParkingApi,
  addParkingApi,
  getParkingDeatilApi,
  updataParking,
  delParkingApi
} from '@/api/parking'
export default {
  name: 'Parking',

  data() {
    return {
      createTime: [],
      loading: false,
      id: '',
      dialog: false, // 抽屉
      count: 0,
      currentPage: 1, // 当前页数
      // 表格
      tableData: [],
      formInline: {
        // 这个是抽屉里的表单
        user: '',
        region: ''
      },
      // 搜索 表单
      formData: {
        current: 1,
        pageSize: 10,
        name: '', // 车位
        community_code: '', // 小区名称对应的车位编码
        create_time: '' // 时间
      },
      // 获取表格数据的传参
      table: {
        current: 1,
        pageSize: 10,
        create_time: ''
      },
      options: [],
      addOptions: [],
      addData: {
        // 新增和编辑的表单

        community_code: '',
        name: '',
        remark: ''
      }
    }
  },
  created() {
    this.getCommunityList()
    this.getTableList()
  },
  mounted() {},

  methods: {
    // 选择时间
    selectTime(data) {
      if (data) {
        this.formData.create_time = data.toString()
      }
    },
    // 获取下拉框数据
    async getCommunityList() {
      const res = await getCommunityListApi(this.table)
      this.options = res.data.data.rows
      this.addOptions = res.data.data.rows
    },
    // 获取表格数据
    async getTableList() {
      const res = await getParkingListApi(this.table)
      this.tableData = res.data.data.rows

      // console.log("count", res.data.data.count);
      this.count = res.data.data.count
    },
    // 搜索
    async searchSubmit() {
      const res = await SearchParkingApi(this.formData)
      console.log('我是搜索', res.data.data.rows)
      if (res.data.data.rows.length === 0) {
        console.log('我是0')
        this.tableData = []
      } else {
        console.log('我是1')
        this.tableData = res.data.data.rows
      }
      // this.tableData = res.data.data.rows;

      // this.resetting();
      // 还有个name没搞好
    },
    // 重置搜索表单
    resetting() {
      this.formData = {
        current: 1,
        pageSize: 10,
        name: '',
        community_code: '',
        create_time: ''
      }
      this.createTime = [] // 时间
      // 表格数据刷新
      this.getTableList()
    },
    // 点击确定
    async onSubmit() {
      // console.log("submit!");
      if (this.addData.id) {
        // 修改
        await updataParking(this.addData)
        console.log('这是修改')
      } else {
        // 新增
        await addParkingApi(this.addData)
      }
      this.$message('操作成功')
      this.dialog = false
      this.getTableList()
    },
    // 新增小区
    async addCom() {
      this.dialog = true
      this.addData = {
        // 新增和编辑的表单

        community_code: '',
        name: '',
        remark: ''
      }
    },
    // 编辑
    async edit(id) {
      this.id = id
      // // 打开弹窗
      this.dialog = true
      const res = await getParkingDeatilApi(id)
      this.addData = res.data.data
    },
    // 删除小区
    async del(id) {
      await this.$confirm('确认删除吗？')
      await delParkingApi(id)
      this.$message('删除成功')
      this.getTableList()
    },
    // 关闭抽屉
    handleClose() {
      this.dialog = false
    },
    // 刷新数据
    refresh() {
      this.resetting()
      this.getTableList()
      this.$message('刷新成功')
    },
    // 切换分页
    changeCurrent(val) {
      console.log(val)
      this.table.current = val
      this.getTableList()
    },
    changeSize(val) {
      console.log(val)
    }
  }
}
</script>

<style lang="scss" scoped>
.contanter {
  padding: 20px;
}
.two {
  margin-top: 20px;
}
::deep .el-table__body {
  width: 100% !important;
}
</style>
